<script setup lang="ts">
import VideoByRtc from '@/views/faceRecognition/components/VideoByRtc/VideoByRtc.vue'
import VideoByInput from '@/views/faceRecognition/components/VideoByInput/VideoByInput.vue'
import {
  isWebRTCSupported,
  isGetUserMediaSupported,
  hasWebcam,
  load
} from 'detectrtc'
import { ref } from 'vue'
import { showSuccessToast } from 'vant'
const VERIFY_TYPE = {
  videoByInput: 'refVideoByInput',
  videoByRtc: 'refVideoByRtc'
}
const verifyType = ref(VERIFY_TYPE.videoByRtc)

const refVideoByRtc = ref()
const refVideoByInput = ref()

load(() => {
  console.info('isWebRTCSupported', isWebRTCSupported)
  console.info('isGetUserMediaSupported', isGetUserMediaSupported)
  console.info('hasWebcam', hasWebcam)
  if (!isGetUserMediaSupported) {
    // 不支持WebRTC，切换为input方案
    verifyType.value = VERIFY_TYPE.videoByInput
  }
})

const notSupported = () => {
  verifyType.value = VERIFY_TYPE.videoByInput
}

const finished = ({ reset }) => {
  showSuccessToast('录制成功');
  reset()
}

</script>

<template>
  <div style="height: 100%" class="FaceRecognition">
    <VideoByRtc
      v-if="verifyType === VERIFY_TYPE.videoByRtc"
      ref="refVideoByRtc"
      @notSupported="notSupported"
      @finished="finished"
    />
    <VideoByInput
      v-if="verifyType === VERIFY_TYPE.videoByInput"
      @finished="finished"
      ref="refVideoByInput"
    />
  </div>
</template>
